<template>
	<view>
		<u-popup v-model="giftShow" mode="center" border-radius="20" width="600rpx" :z-index="99999" @close="onCloseGift">
			<view class="label u-p-30">
				<view class="u-flex u-flex-wrap">
					<view :class="item.check ? 'checkTag' : 'noCheckTag'" v-for="item in giftData.list" :key="item.id" @click="onChoosePoint(item)">{{item.name}}</view>
					<view class="u-width-100" v-if="giftData.checkId == 9527">
					    <u-input v-model="giftData.checkNum" placeholder="请填写自定义积分（不少于10积分）" input-align="left" :type="'number'"></u-input>
					</view>
				</view>
				<view>
					<view class="u-font-bold u-font-30 u-m-t-15 u-m-b-15">感谢文字</view>
					<u-input type="textarea" v-model="giftData.text" :custom-style="customStyle" height="50" :clearable="false"></u-input>
				</view>
				<view class="u-m-t-15">
					<u-checkbox v-model="giftData.isAnonymous" shape="circle" label-size="26" icon-size="22" active-color="#B3723E">是否匿名</u-checkbox>
				</view>
				<view class="u-m-t-20 gift_btn" @click="onGiftChoose">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { debounce } from '@/utils/index.js'
	export default{
		props:{
			show:{
				type: Boolean,
				default: false
			},
			data:{
				type: Object
			},
			status:{
				type: Boolean,
				default: true
			}
		},
		watch:{
		    show: {
		    	deep: true,
		    	handler(val) {
		    		this.giftShow = val
		    	}
		    },
			data: {
				deep: true,
				handler(val) {
					this.giftData = val
				}
			},
			status: {
				deep: true,
				handler(val){
					this.btnStatus = val
				}
			}
		},
		data(){
			return{
				giftShow: this.show,
				giftData: this.data,
				btnStatus: this.status
			}
		},
		methods:{
			onCloseGift(){
				this.$emit("onCloseGift")
			},
			onChoosePoint(val){
				this.giftData.list.map(item=>item.check = false)
				this.giftData.checkId = val.id
				this.giftData.checkNum = val.num
				val.check = true
			},
			onGiftChoose(){
				if(this.btnStatus && this.giftShow){
					this.$emit("onGiftChoose",this.giftData)
				}
			}
		}
	}
</script>

<style scoped>
	.checkTag{
		background: #fb6316;
		border: 1rpx solid #fb6316;
		color: #fff;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		margin: 0 20rpx 20rpx 0;
		font-size: 26rpx;
	}
	
	.noCheckTag{
		background-color: #fff;
		border: 1rpx solid #808080;
		color: #808080;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		margin: 0 20rpx 20rpx 0;
		font-size: 26rpx;
	}
	
	.gift_btn{
		background: #F96257;
		color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>